<template>
	<view class="pad-b50">
		<view class="block-tit f-s40 mar-t10">您的商品已在路上</view>
		<view class="map-box h-398" >
			<map 
				style="width: 100%; height: 100%" 
				:latitude="latitude" 
				:longitude="longitude" 
				:markers="markers"
			>
			</map>
		</view>
		<view class="bg-f bor-r16 padlr20 padtb32 mar-t20">
			<view class="block-tit f-s28">湖南省长沙市芙蓉区长沙大厦273号楼337门</view>
			<view class="user-info-txt mar-t16">唐欣 15200856389</view>
		</view>
		<view class="bg-f bor-r16 padlr20 padtb32 mar-t20">
			<view class="block-tit f-s28">商品明细</view>
			<u-line margin="24rpx 0 0"></u-line>
			<view class="product-list">
				<view 
					class="product-li flex mar-t28"
					v-for="(item, index) in 4"
				>
					<u--image
						:showLoading="true" 
						:src="getImg('integralRecord-bg')"
						width="136rpx" 
						height="136rpx"
					></u--image>
					<view class="li-info h-136 pad-l16 flex-col ju-bt">
						<view class="block-tit f-s28">资生堂悦薇精华水2号 (滋润型)</view>
						<view class="info-tips">
							编码：1001 库存量：8
						</view>
						<view class="flex-a ju-bt">
							<text class="info-tips">零售价：¥580.00</text>
							<text class="info-num">x1</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-f bor-r16 padlr20 padtb32 mar-t20">
			<view 
				class="cell-box flex-a ju-bt " 
				v-for="(item, index) in cellList" 
				:key="index"
				:class="{'mar-t24': index}"
			>
				<view class="cell-label">
					{{ item.label }}：
				</view>
				<view class="cell-val">
					在线支付
				</view>
			</view>
		</view>
		<view class="btns-box flex flex-j-end mar-t32">
			<view class="btn flex-center">申请退款</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "orderDelivery", // 订单配送中
		data() {
			return {
				/* 地图 */
				latitude: 28.174501,
				longitude: 112.999419,
				/* 地图标点信息 */
				markers: [
					{
						latitude: 28.174501,
						longitude: 112.999419,
						// iconPath: item.avatar,
						width: '20px',
						height: '30px',
						label: {
							content: `美容师正在上门 \n 距您1.3km，预计13分钟`,
							color: "#111111",
							padding: '20rpx',
							borderColor: "#fff",
							bgColor: '#fff',
							anchorY: '-15',
							anchorX: 15
						}
					}
				],
				cellList: [
					{
						label: "备注",
						key: ""
					},
					{
						label: "订单号",
						key: ""
					},
					{
						label: "下单时间",
						key: ""
					},
					{
						label: "送达时间",
						key: ""
					},
					{
						label: "支付方式",
						key: ""
					},
				],
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.btns-box {
		.btn {
			width: 240rpx;
			height: 76rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #000000;
		}
	}
	.cell-box {
		.cell-label {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}
		.cell-val {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
		}
	}
	.product-list {
		.product-li {
			.li-info {
				width: calc(100% - 136rpx);
				.info-tips {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
				.info-num {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #111111;
				}
			}
		}
	}
	.user-info-txt {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
	}
	.map-box {
		background-color: #f99;
	}
</style>